<template>
	<view class="uni-container">
	  <uni-forms ref="formRef" v-model="formData" :rules="rules" validateTrigger="blur">
	  	<uni-forms-item name="name" label="分类名称" required>
	  		<uni-easyinput v-model="formData.name" placeholder="请输入分类名称" />
	  	</uni-forms-item>
	  	<uni-forms-item name="picurl" label="缩略图" required>
			<iss-image-upload 
				v-model="formData.picurl" 
				upload-path="wallpaper/category"
				ref="imageUploadRef"
			/>
	  	</uni-forms-item>
		<uni-forms-item name="sort" label="排序" required>
			<uni-easyinput v-model="formData.sort" placeholder="请输入排序号" type="number"/>
		</uni-forms-item>
		<uni-forms-item name="select" label="是否推荐">
			<switch @change="binddata('select', $event.detail.value)" :checked="formData.select" />
		</uni-forms-item>
	  	<uni-forms-item name="enable" label="是否启用">
	  		<switch @change="binddata('enable', $event.detail.value)" :checked="formData.enable" />
	  	</uni-forms-item>
	  	<view class="uni-button-group">
	  		<button style="width: 100px;" type="primary" class="uni-button"
	  			@click="submitForm">{{$t('common.button.submit')}}</button>
			<button style="width: 100px; margin-left: 15px;"
				class="uni-button" @click="navigateBack(false)">{{$t('common.button.back')}}</button>
	  	</view>
	  </uni-forms>
	</view>
</template>

<script setup>
	import { ref, getCurrentInstance } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { cloudIdToUrl } from '@/utils/common.js'
	import IssImageUpload from '@/components/iss-image-uplaod/iss-image-uplaod.vue'
	import { useForm } from '@/utils/composable'
	
	const wallpaperObj = uniCloud.importObject("iss-wallpaper");
	
	
	const formRef = ref(null)
	// 表单数据
	const formData = ref({
		name: '',
		picurl:'',
		sort:0,
		select: undefined,
		enable: undefined
	})
	
	const imageUploadRef = ref(null)
	
	const rules = ref({
		// 对name字段进行必填验证
		name: {
			rules:[
				{
					required: true,
					errorMessage: '请填写{label}',
				},
				{
					minLength: 2,
					maxLength: 6,
					errorMessage: '{label}长度在 {minLength} 到 {maxLength} 个字符',
				},// 添加异步验证规则
				{
					validateFunction: async (rule, value, data, callback) => {
						return new Promise(async (resolve, reject) => {
							try {
								const res = await wallpaperObj.checkNameUnique_classify(formData.value)
								// console.log('res=',res)
								if (res.code == 200) {
									resolve()
								} else {
									reject(new Error(res.msg));
								}
							} catch (e) {
								reject('校验请求失败:'+e);
							}
						})
					}
				}
			],
			label:'分类名称'
		},
		picurl: {
			rules:[
				{
					required: true,
					errorMessage: '请上传{label}',
				}
			],
			label:'缩略图'
		},
		sort: {
			rules:[
				{
					required: true,
					errorMessage: '请输入{label}',
				}
			],
			label:'排序号'
		}
	})
	
	const {submitForm,navigateBack} = useForm({
		title:'壁纸分类',
		formRef,
		formData,
		doc: wallpaperObj.doc_classify,
		add: wallpaperObj.add_classify,
		update: wallpaperObj.update_classify,
		// 获取数据后的钩子
		onGetDataSucceed: (data)=>{
			// 将云存储ID转换为可访问的URL
			if(data.picurl) {
				let url = cloudIdToUrl(data.picurl)
				formData.value.picurl = url
			}
		},
		// 在表单校验成功之后，在提交formData到数据库之前，需要做的异步操作
		beforeSubmitOptAsync: async () => {
			await imageUploadRef.value.uploadImage()
		}
	})
	
	
</script>

<style lang="scss" scoped>
::v-deep .uni-forms-item__label {
	width: 90px !important;
}
</style>